<template>
	<view class="bg container" :style="{paddingTop:blindBoxheight+'rpx'}">
		<view class="diamondMall_head flex-between flex1">
			<view class="">
				<image  style="width: 40rpx;height: 40rpx;margin-top: 30rpx;opacity: 0;" src="../../static/my/shezhi.png" mode="widthFix"></image>
			</view>
			<view class="center detailName">
				我的
			</view>
			<view class="" @click="toSetting">
				<image  style="width: 40rpx;height: 40rpx;margin-top: 20rpx;" src="../../static/my/shezhi.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="my_boxone">
			<view class="my_box">
				<view class="userinfobox">
					<view class="portrait">
					</view>
					<view class="flex" style="justify-content: flex-start;">
						<view class="my_photo_before">
							<image class="my_photo_now" v-if="userInfo.head_image" :src="userInfo.head_image" mode=""></image>
							<image class="my_photo_now" v-else src="../../static/my/userLogo.jpg" mode=""></image>
							
						</view>
						<view class="" style="margin: 0 0px 0 20rpx;">
							<view class="size-26">
								{{ userInfo.nick_name }}
							</view>
							<view class="flex1 mt-20" @click="copy(userInfo.uuid)">
								<view class="fw">
									UID
								</view>
								<view class="flex1 ml-20 fw">
									<view class="">
										{{userInfo.uuid}}
									</view>
									<view class="">
										<image class="my_fuzhi" src="../../static/my/fuzhi.png"></image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="my_boxtwo">
				<view @click="copy(userInfo.wallet_address)" style=""
					class="flex flex-between gray-2 size-24 radius-25 plr-20 ">
					<view class="text-ellipsis black" >
						区块链地址：{{ userInfo.wallet_address }} </view>
					<image src="../../static/my/fuzhi.png" class="my_fuzhi"></image>
				</view>
				<view class="btnbox">
					<view class="btnitem " @click="toOrder">
						<view class="btnleft">
							<image src="../../static/my/cangpin.png" mode="widthFix"></image>
							<view class="btntext">我的藏品</view>
						</view>
					</view>
					<view class="btnitem" @click="toWallet">
						<view class="btnleft">
							<image src="../../static/my/qianbao.png" mode="widthFix"></image>
							<view class="btntext">我的钱包</view>
						</view>
					</view>
				</view>
			</view>
			<view style="padding-bottom: 180rpx;">
				<view class="cellbox">
					<u-cell-group :border="false">
						
						<u-cell-item :border-bottom="false" @click="toBox" bg-color=""
							style='border-bottom: 1px solid #F8F8F8;color: #000;' icon="" title="我的盲盒">
							<u-icon color="#000" slot="icon" size="40" name="trash-fill" style="margin-right: 4rpx;"></u-icon>
						</u-cell-item>
						<u-cell-item bg-color="" :border-bottom="false" @click="toChip"
							style='border-bottom: 1px solid #F8F8F8;' icon="" title="藏品合成">
							<u-icon color="#000" slot="icon" size="40" name="grid" style="margin-right: 4rpx;"></u-icon>
						</u-cell-item>
						<u-cell-item :border-bottom="false" @click="goUser" bg-color=""
							style='border-bottom: 1px solid #F8F8F8;color: #000;' icon="" title="我的订单">
							<image src="../../static/my/dingdan.png" mode="widthFix"
								style="width: 40rpx;height: 40rpx;margin: 0 8rpx 0 0;" slot='icon'></image>
						</u-cell-item>
						<u-cell-item :border-bottom="false" @click="toAuth" bg-color=""
						 style='border-bottom: 1px solid #F8F8F8;color: #000;' icon="" title="我的认证"
							:value="is_auth">
							<image src="../../static/my/renzheng.png" mode="widthFix"
								style="width: 40rpx;height: 40rpx;margin: 0 8rpx 0 0;" slot='icon'></image>
						</u-cell-item>
					</u-cell-group>
					<view class="box2">
						<u-cell-group :border="false">
							<u-cell-item bg-color="" @click="goprivacySettings" :border-bottom="false"
								style='border-bottom: 1px solid #F8F8F8;' icon="" title="隐私设置">
								<image src="../../static/my/yinsi.png" mode="widthFix"
									style="width: 40rpx;height: 40rpx;margin: 0 8rpx 0 0;" slot='icon'></image>
							</u-cell-item>
							<u-cell-item bg-color="" @click="toaboutArt" :border-bottom="false"
							 style='border-bottom: 1px solid #F8F8F8;color: #000;' icon="" title="关于天衍">
								<image src="../../static/my/guanyu.png" mode="widthFix"
									style="width: 40rpx;height: 40rpx;margin: 0 8rpx 0 0;" slot='icon'></image>
							</u-cell-item>
						</u-cell-group>
					</view>
					<view class="box2">
						<!-- 分享模态框 -->
						<u-modal :mask-close-able="true" :show-title="false" width="75%" v-model="show"
							:show-confirm-button="false">
							<view class="modal_box" style="position: relativ
							e; z-index: 0;background-color: #181B22;">
								<view class="" >
									<image class="modal_box_bg" src="../../static/my/modal_box_top.png"
										mode="scaleToFill" style=""></image>
								</view>
								<view class="p10 size-20 text-right ">
									<u-icon name="close" style="color: #FFF;" @click="clearmodal()"></u-icon>
								</view>
								<view class="" style="width: 130rpx;height: 130rpx;margin: 0 auto;">
									<image class="photo" src="../../logo.png" mode=""></image>
								</view>
								<view class="modal_box_bottom" style="position: relative; z-index: 0;">
									<view class="">
										<image class="photo modal_box_bg" src="../../static/my/modal_box_bg.png"
											mode="scaleToFill"></image>
									</view>
									<view class="">
										<image class="modal_box_bg" src="../../static/my/modal_box_top.png"
											mode="heightFix" style="height: 100%;"></image>
									</view>
									<view class="" style="width: 250rpx;margin: 0 auto;">
										<image class="photo mt-30"
											:src="share_image"
											mode="widthFix"></image>
									</view>
									<view class="size-20 center mt-30 fw">
										扫码下载
									</view>
									<view class="size-20 center fw">
										开启您的数字艺术之旅
									</view>
									<view class="p10 mt-30">
										<view class="center modal_box_bottom_button" style="" @click="savephoto()">
											<view class="size-20">
												保存图片
											</view>
										</view>
									</view>
								</view>
							</view>
						</u-modal>
						<u-cell-group :border="false">
							<!-- <u-cell-item bg-color="" :border-bottom="false" @click="open"
								style='border-bottom: 1px solid #F8F8F8;' icon="" title="分享天衍">
								<image src="../../static/my/fenxiang.png" mode="widthFix"
									style="width: 40rpx;height: 40rpx;margin: 0 8rpx 0 0;" slot='icon'></image>
							</u-cell-item> -->
							
							
							<u-cell-item bg-color="" :border-bottom="false" @click="toInviteFriends"
								style='border-bottom: 1px solid #F8F8F8;' icon="" title="邀请好友">
								<image src="../../static/my/fenxiang.png" mode="widthFix"
									style="width: 40rpx;height: 40rpx;margin: 0 8rpx 0 0;" slot='icon'></image>
							</u-cell-item>
							
							

							<!-- <u-cell-item bg-color="" @click="tocustomer()" :border-bottom="false" icon="" title="我的客服">
								<image src="../../static/my/kefu.png" mode="widthFix"
									style="width: 40rpx;height: 40rpx;margin: 0 8rpx 0 0;" slot='icon'></image>
							</u-cell-item> -->
						</u-cell-group>
						
						<!-- <view class="text-center mt-40" @click="toMining">
							<image src="../../static/my/Mining.png" mode="widthFix" style="width: 90%;"></image>
						</view> -->
						<view class="text-center mt-40">
							<image src="../../static/my/jG1.png" mode="widthFix" style="width: 300rpx;"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<tab></tab>
	</view>
</template>

<script>
	import tab from '../../components/tab.vue';
	export default {
		components: {
			tab
		},
		data() {
			return {
				blindBoxheight:'',
				show: false,
				content: '',
				cheight: '',
				userInfo: {
					headImg: ''
				},
				is_auth: '',
				changeShow: false,
				saleConfig: {},
				openPop: false,
				openPop: false,
				terracePrice: 0,
				authorPrice: 0,
				payPrice: 0,
				realPrice: 0,
				gifShow: false, //盲盒动图
				arr: [],
				gifUrl: "../../static/open.gif",
				salePrice: '',
				saleShow: false,
				salePrice: '',
				afterPrice: '',
				transferShow: false,
				transferPhone: '',
				is_trade: 0,
				list: [],
				status: 0,
				share_image:'',//分享图片地址
				navarr: [{
						val: '藏品',
						active: true,
						index: 0
					},
					{
						val: '盲盒',
						active: false,
						index: 1
					},
					{
						val: '出售中',
						active: false,
						index: 2
					},
					{
						val: '已卖出',
						active: false,
						index: 3
					}
				],
				showpage: 0,

				collectList: [],
				page: 1,
				searchStr: '',
			};
		},
		onLoad: function() {
			let _that = this;
			this.cheight = wx.getSystemInfoSync().windowHeight
			uni.getSystemInfo({
				success(e) {
					console.log(e.statusBarHeight, '123122222222222222222222');
					if (e.platform == "ios" || e.platform == "devtools") {
						_that.blindBoxheight = e.statusBarHeight + 45;
					} else {
						_that.blindBoxheight = e.statusBarHeight + 50;
					}
				}
			})
		},
		onShow() {
			this.$http('api/user/userInfo').then(res => {
				this.userInfo = res;
				// console.log(this.userInfo);
				if (this.userInfo.is_auth == 1) {
					this.is_auth = '已认证'
				} else {
					this.is_auth = '未认证'
				}
			});


		},
		onHide() {
			this.collectList = [];
		},
		onPullDownRefresh() {
			setTimeout(function () {
				uni.stopPullDownRefresh();
				
			}, 1000);
			this.collectList = [];
			this.init();
		},
		methods: {
			// 挖矿小游戏
			toMining(){
				uni.navigateTo({
					url:'./mining'
				})
			},
			// 邀请好友
			toInviteFriends(){
				uni.navigateTo({
					url:'../home/InviteFriends'
				})
			},
			// 关闭模态框
			clearmodal() {
				this.show = false
			},
			// 保存图片
			savephoto() {
				console.log(1);
			},
			open() {
				this.show = true;
				console.log('111')
				var params ={
					// _token:this.app_token,
				}
				uni.request({
					url: ` http://langchao.art/api/login/share_image`,
					method: 'GET',
					data: params,
					success: (res) => {
						this.share_image=res.data.data.share_image
						console.log(res.data.data.share_image)
					},
				})
			},
			goprivacySettings() {
				uni.navigateTo({
					url: './privacySettings'
				})
			},
			transferRecord() {
				uni.navigateTo({
					url: './transferRecord'
				});
			},
			toChip() {
				// uni.switchTab({
				uni.navigateTo({
					// url: './transferRecord'
					url: '../chip/index'
				});
			},
			toStuff() {
				uni.navigateTo({
					url: '../chip/stuff'
				});
			},
			tocustomer() {
				uni.navigateTo({
					url: '/pages/my/manualCustomerservice'
				});
			},

			toaboutArt() {
				uni.navigateTo({
					url: './aboutArt'
				})
			},
			toAuth() {
				uni.navigateTo({
					url: './realAuth'
				});
			},
			goUser() {
				uni.navigateTo({
					url: './myOrder'
				});
			},
			quit() {
				wx.showToast({
					title: '退出登录成功!',
					icon: 'success'
				})
				setTimeout(() => {
					uni.removeStorageSync('token');
					uni.navigateTo({
						url: '../login/index'
					});
				}, 1000);
			},
			submitSale() {
				if (this.salePrice == "") {
					uni.showToast({
						title: "请输入价格!",
						icon: "none"
					})
					return;
				}
				this.$http('api/orders/boxSale', {
					id: this.saleId,
					price: this.salePrice
				}, 'POST').then(res => {
					uni.showToast({
						title: "出售成功!",
						icon: "none"
					})
					this.saleShow = false;
					this.current = 2;
					this.status = 2;
					this.init();
				})
			},
			getShowInput(e) {
				let saleConfig = this.saleConfig;
				this.terracePrice = e * saleConfig.terrace_rate / 100;
				this.authorPrice = e * saleConfig.author_rate / 100;
				this.payPrice = e * saleConfig.pay_rate / 100;
				this.realPrice = e - this.terracePrice - this.authorPrice - this.payPrice;
			},
			submitChange() {
				if (this.afterPrice == "") {
					uni.showToast({
						title: "请输入价格!",
						icon: "none"
					})
					return;
				}
				this.$http('api/orders/boxUpdatePrice', {
					id: this.changeId,
					price: this.afterPrice
				}, 'POST').then(res => {
					uni.showToast({
						title: "改价成功!",
						icon: "none"
					})
					this.changeShow = false;
					this.init();
				})
			},
			getShowInput(e) {
				let saleConfig = this.saleConfig;
				this.terracePrice = e * saleConfig.terrace_rate / 100;
				this.authorPrice = e * saleConfig.author_rate / 100;
				this.payPrice = e * saleConfig.pay_rate / 100;
				this.realPrice = e - this.terracePrice - this.authorPrice - this.payPrice;
			},
			submitChange() {
				if (this.afterPrice == "") {
					uni.showToast({
						title: "请输入价格!",
						icon: "none"
					})
					return;
				}
				this.$http('api/orders/boxUpdatePrice', {
					id: this.changeId,
					price: this.afterPrice
				}, 'POST').then(res => {
					uni.showToast({
						title: "改价成功!",
						icon: "none"
					})
					this.changeShow = false;
					this.init();
				})
			},
			getShowInput(e) {
				let saleConfig = this.saleConfig;
				this.terracePrice = e * saleConfig.terrace_rate / 100;
				this.authorPrice = e * saleConfig.author_rate / 100;
				this.payPrice = e * saleConfig.pay_rate / 100;
				this.realPrice = e - this.terracePrice - this.authorPrice - this.payPrice;
			},
			submitTransfer() {
				if (this.transferPhone == "") {
					uni.showToast({
						title: "请输入受赠人手机号!",
						icon: "none"
					})
					return;
				}
				this.$http('api/orders/goodsTransfer', {
					id: this.transferId,
					phone: this.transferPhone
				}, 'POST').then(res => {
					uni.showToast({
						title: "转赠成功!",
						icon: "none"
					})
					this.transferShow = false;
					this.current = 5;
					this.status = 5;
					this.init();
				})
			},
			upBox(item) {
				let _this = this;
				let msg = item.is_show == 1 ? '下架?' : '上架?';
				uni.showModal({
					title: '提示',
					content: '将此盲盒' + msg,
					confirmColor: '#44ACFF',
					success: function(res) {
						if (res.confirm) {
							_this.$http('api/orders/boxUpdateShow', {
								id: item.id,
								is_show: item.is_show == 1 ? 0 : 1
							}, 'POST').then(res => {
								uni.showToast({
									title: "操作成功!",
									icon: "none"
								})
								_this.init();
							})
						} else if (res.cancel) {
							uni.showToast({
								title: "取消操作!",
								icon: "none"
							})
						}
					}
				});
			},
			saleBox(item) {
				this.saleId = item.id;
				this.salePrice = item.price;
				this.saleShow = true;
				this.getShowInput(this.salePrice);
			},
			openBox(id) {
				let _this = this;
				uni.showModal({
					title: '提示',
					content: '立即拆开?',
					confirmColor: '#EFAA1C',
					success: function(res) {
						if (res.confirm) {
							_this.$http('api/orders/boxOpen', {
								id: id
							}, 'POST').then(res => {
								_this.gifUrl = `../../static/open.gif?${new Date().getTime()}`
								_this.gifShow = true;
								setTimeout(() => {
									_this.gifShow = false;
									_this.openfig = res;
									_this.openPop = true;
									_this.current = 6;
									_this.status = 6;
									_this.init();
								}, 3800)
							})
						} else if (res.cancel) {
							uni.showToast({
								title: "取消操作!",
								icon: "none"
							})
						}
					}
				});
			},
			toTransfer(id) {
				this.transferShow = true;
				this.transferPhone = '';
				this.transferId = id;
			},
			// 盲盒跳转
			goDetails(id) {
				uni.navigateTo({
					url: './boxDetails?id=' + id
				})
			},

			collectDetail(id, status) {
				status = this.showpage
				uni.navigateTo({
					url: './collectDetail?id=' + id + '&status=' + status
				});
			},
			todetail(id) {
				uni.navigateTo({
					url: './collectDetails?id=' + id
				});
			},
			// 藏品跳转
			// goDetails(id) {
			//   uni.navigateTo({
			// 	url:'/pages/home/homeDetails?id='+id
			//   });
			// },
			init() {


			},
			toHelp() {
				uni.navigateTo({
					url: './help'
				})
			},
			//我的右上角去个人信息
			onNavigationBarButtonTap() {
				uni.navigateTo({
					url: './editUser'
				})
			},
			toSetting() {
				uni.navigateTo({
					url: './editUser'
				})
			},
			navfn(item) {
				for (let i = 0; i < this.navarr.length; i++) {
					this.navarr[i].active = false
				}
				item.active = true
				this.showpage = item.index
				this.init()
			},
			transferRecord() {
				uni.navigateTo({
					url: './transferRecord'
				});
			},
			quit() {
				uni.removeStorageSync('token');
				uni.navigateTo({
					url: '../login/index'
				});
			},
			// 去我的藏品
			toOrder() {
				uni.navigateTo({
					url: './myCollect'
				});
			},
			toBox() {
				uni.navigateTo({
					url: './myBox'
				});
			},
			toTeam() {
				uni.navigateTo({
					url: './myTeam'
				});
			},

			toContact() {
				uni.navigateTo({
					url: './contact'
				});
			},
			toWallet() {
				// this.$http('api/remittance/heepayWallet').then(res => {
				// 	console.log(res)
				// 	console.log(res.redirect_url)
				// 	if(res.code==1){
				// 		window.location.href = res.redirect_url
				// 		// var url = res.redirect_url;
				// 		// uni.navigateTo({
				// 		// 	url: './myWallet/webview?url=' + encodeURIComponent(JSON.stringify(url))
				// 		// })
						
				// 	}else{
				// 		uni.showToast({
				// 			title: res.result_msg,
				// 			icon:'none'
				// 		})
				// 	}
				// })
				uni.navigateTo({
					url: './myWallet'
				});
				// console.log(this.userInfo.is_first_pay)
				// if(this.userInfo.is_first_pay == 0){
				// 	uni.navigateTo({
				// 		url: './premium'
				// 	});
				// }else{
				// 	uni.navigateTo({
				// 		url: './myWallet'
				// 	});
				// }
				
			},
			toStuff() {
				uni.navigateTo({
					url: '../chip/stuff'
				});
			},
			// 实名认证
			toAuth() {
				uni.navigateTo({
					url: './realAuth'
				});
			},
			toAbout() {
				uni.navigateTo({
					url: './about'
				});
			},
			copy(val) {
				// #ifdef APP-PLUS
				uni.setClipboardData({
					data: val,
					success: function() {
						console.log(val, "val``````````````");
						uni.hideToast();
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: '区域链地址复制成功',
									icon: 'none'
								});
							}
						});
					}
				});
				// #endif
				// #ifdef H5
				this.$copyText(val).then(
					function(e) {
						console.log(val, e);
						uni.showToast({
							title: '区域链地址复制成功!',
							icon: 'none'
						});
					},
					function(e) {
						uni.showToast({
							title: '区域链地址复制失败!',
							icon: 'none'
						});
					}
				);
				// #endif
			}
		}
	};
</script>
<style lang="less" scoped>
	.my_fuzhi {
		width: 24rpx;
		height: 22rpx;
		margin: 0 0 0 20rpx;
	}

	.my_photo_before {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: #000;

		.my_photo_now {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.modal_box_bottom_button {
		background-image: linear-gradient(to right, #606060, #2B2B2B);
		color: #FFF;
		border-radius: 24rpx;
		height: 70rpx;
		width: 400rpx;
		margin: 0 auto;

	}

	.modal_box_bottom {
		background-color: #fff;
		height: 100%;
		border-radius: 25rpx 25rpx 0 0;
		margin: 40rpx 0 0 0px;
	}

	.modal_box_bg {
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		;
	}

	.modal_box {
		height: 800rpx;
	}

	::v-deep .u-tabbar__content__item__text {
		font-size: 24rpx !important;
	}

	::v-deep .u-cell_title {
		color: #000 !important;
		font-size: 24rpx;
	}


	.container {
		// width: 100%;
		// height: 100vw;
		width: 100%;
		min-height: 100vh !important;
		.cellbox {
			.box2 {
				// margin-top: 20rpx;
			}
		}
		.diamondMall_head {
			width: 100%;
			padding: 0 20rpx;
			box-sizing: border-box;
			// height: 100rpx;
			.detailName{
				// font-size: 36rpx;
				font-weight: 600;
			}
		}

		.btnbox {
			bottom: 20rpx;
			// width: 96%;
			height: 90rpx;
			line-height: 90rpx;
			margin: 20rpx 0 0 0;
			text-align: center;
			color: #fff;
			// background-image: linear-gradient(to left top,#714aed,#3b37f3);
			border-radius: 40rpx;
		}
	}

	.my_boxone {
		width: 100%;
		padding: 0 24rpx 24rpx;
		// background-color: #EDD480;
		height: 200px;
	}

	.my_boxtwo {
		padding: 24rpx;
		background-color: #E2C87B;
		border-radius: 0px 0rpx 24rpx 24rpx;
		// height: 140rpx;
	}

	.flex {
		display: flex;
	}

	.my_box {
		// margin: 24rpx;
		// background-color: #EDD480;
		// border-radius: 30rpx;
		padding: 24rpx;
		background-color: #EDD480;
		border-radius: 24rpx 24rpx 0px 0px;
		height: 140rpx;
	}

	.btnWrap {
		::v-deep  uni-button {
			height: 60rpx !important;
			padding: 0 30rpx !important;
			font-size: 22rpx;
			margin-right: 10rpx;
		}

		.transferBtn {
			background: #44ACFF;
			color: #fff;
		}

		.saleBtn {
			border: 1rpx solid #44ACFF;
			background: transparent;
			color: #44ACFF;
		}
	}


	// .container {
	// 	width: 100%;
	// 	min-height: 100vh !important;
	// }

	.rightbox {
		.righticon {
			width: 30rpx;
		}
	}

	.userinfobox {
		// width: 100%;
		// align-items: center;
		// display: flex;
		// flex-direction: column;
		// margin-bottom: 4rpx;
		// margin-top: 3rpx;
		// position: relative;
		font-size: 24rpx;

		.topRight {
			position: absolute;
			right: 0;
			display: flex;

			image {
				width: 40rpx;
				margin: auto 20rpx;
			}
		}
	}

	.btnbox {
		display: flex;
		justify-content: space-between;
		// padding: 20rpx;
		// margin: 20rpx;

		.btnitem {
			width: 47%;
			height: 90rpx;
			line-height: 90rpx;
			display: flex;
			justify-content: space-between;
			padding: 0 46rpx;
			background-color: #F1E3BE;
			border-radius: 20rpx;
			font-size: 24rpx;
			margin: 10rpx 0 0 0;

			.btnleft {
				display: flex;
				margin: auto 0;

				.btntext {
					color: #000;
					margin-left: 20rpx;
				}

				image {
					width: 40rpx;
					margin: auto 0;
				}
			}

			image {
				width: 30rpx;
				margin: auto 0;
			}
		}
	}

	.allcollect {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.collectitem {
			// border: 1rpx solid red;
			background-color: #000;
			position: relative;
			width: 44%;
			margin: 2% 2% 0 2%;

			.collectItem {
				.itemTips {
					// width: 110rpx;
					// height: 110rpx;
				}
			}

		}

		.workname {
			color: #fff;
		}

		.author {
			color: #fff;
			// overflow: hidden;
			// white-space: nowrap;
			// text-overflow: ellipsis;
		}
	}

	.userImg {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
	}

	.navbox {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 40rpx;

		// color: #fff;
		.navitem {
			.navtext {
				color: #fff;
			}

			.line {
				width: 40rpx;
				height: 6rpx;
				background: linear-gradient(90deg, #6bbeff, #e448f6);
				position: relative;
				top: -8rpx;
				margin: 0 auto;
				border-radius: 10rpx;
			}
		}
	}

	.itemImg {
		width: 150rpx;
		height: 150rpx;
	}

	.collectImg {
		width: 100%;
		height: 690rpx;
	}

	.itemTips {
		position: absolute;
		right: 20rpx;
		top: 20rpx;
		border-radius: 20rpx;
		color: #fff;
		// font-size: 22rpx;
		z-index: 100;

		.sellout {
			width: 120%;
		}
	}

	.allcollect,
	.blindbox,
	.salebox,
	.sold {
		width: 100%;
		color: #fff;
	}

	.allcollect {
		background-color: #000;
	}



	.headImg {
		width: 130rpx;
		height: 130rpx;
		border-radius: 50%;
	}
</style>
